import React from "react";
import ReactDOM from "react-dom/client";
import { Space } from "antd-mobile";
import "antd-mobile/bundle/style.css";
import { GreatJoySwiper } from "../src/index.tsx";
import "../src/index.scss";

/**
 * DEMO盒子
 * @param param0
 * @returns
 */
const DemoBlock: React.FC<{ title: string; children: React.ReactNode }> = ({
	title,
	children,
}) => (
	<div style={{ margin: "16px 0" }}>
		<h3>{title}</h3>
		{children}
	</div>
);

const App: React.FC = () => {
	return (
		<>
			<DemoBlock title="基础用法">
				<Space direction="vertical" block>
					<GreatJoySwiper
						items={[
							{
								imageUrl:
									"https://cimg-cdn.haier.net/obs-oldtest/2025/08/22/c3AyeyZW/20250206-110215.jpg",
							},
							{
								imageUrl:
									"https://cimg-cdn.haier.net/obs-oldtest/2025/08/22/zv9Pvjrd/20250206-110207.jpg",
							},
							{
								imageUrl:
									"https://cimg-cdn.haier.net/obs-oldtest/2025/08/22/feDlVY9o/20250206-110146.jpg",
							},
							{
								imageUrl:
									"https://cimg-cdn.haier.net/obs-oldtest/2025/08/22/QbRDPIxw/20250206-110131-副本.jpeg",
							},
						]}></GreatJoySwiper>
				</Space>
			</DemoBlock>
		</>
	);
};

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);
